<template>
	<div class="settlement-procure-container">
		<a-form ref="searchRef" :model="searchState" @finish="current=1;loading=true;initData()">
			<a-space direction="vertical" style="width:100%">
				<span class="time-filter">
					<a-radio-group v-model:value="searchState.timeType" class="theme-radio" size="small" option-type="button" button-style="solid" :options="timeOptions" @change="changeTimeType(searchState.timeType)" />&nbsp;
					<a-range-picker v-show="searchState.timeType === 7" v-model:value="searchState.date_range" class="theme-input" size="small" allow-clear value-format="YYYY-MM-DD" />
				</span>
				<a-row :gutter="10" style="width: 100%;">
					<a-col :span="8">
						<a-form-item label="二级公司">
							<a-select v-model:value="searchState.company_id" :show-search="true" placeholder="请选择二级公司" :options="companyOptions" option-filter-prop="label" allow-clear></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="项目">
							<a-select v-model:value="searchState.company_id" :show-search="true" placeholder="请选择项目" :options="companyOptions" option-filter-prop="label" allow-clear></a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-space>
		</a-form>
		<a-table
			:columns="columns"
			:data-source="data"
			bordered
			size="small"
			:pagination="false"
			:scroll="{ y: 240 }"
		>
		</a-table>
	</div>
</template>
<script setup lang="jsx">
import { reactive, ref, computed, getCurrentInstance } from "vue";
import dayjs from "dayjs";
const searchState = reactive({
	timeType: 1,
	date_range: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')],
}); // 表单数据
const timeOptions = [ // 筛选
	{ label: '本月', value: 1 },
	{ label: '上月', value: 2 },
	{ label: '本季度', value: 3 },
	{ label: '上季度', value: 4 },
	{ label: '本年', value: 5 },
	{ label: '上年', value: 6 },
	{ label: '自定义', value: 7 },
]
// 表头数据
// 表头
const columns = [
	// {
	// 	title: "序号",
	// 	dataIndex: "key",
	// 	width: 60,
	// 	align: "center",
	// 	fixed: 'left',
	// 	customRender: ({ text, record, index, column }) => {
	// 		return text + 1;
	// 	}
	// },
	{
		title: '省',
		dataIndex: 'material_type',
		align: "left",
	},
	{
		title: '市',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '二级公司',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '项目',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '物资名称',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '规格型号',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '品牌',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '数量',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '金额',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '不含税基准价',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '含税单价（结算）',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '付款条件',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '供应商',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '计价方式',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '采购方式',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '同比',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
	{
		title: '环比',
		dataIndex: 'amount',
		width: 150,
		align: "center",
	},
];

</script>
<style scoped lang="scss">
.settlement-procure-container {
	background: #fff;
	padding: 12px;
	:deep .ant-collapse-header{
		padding: 0 !important
	}
	:deep .ant-collapse-content-box{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}
</style>